<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .icon .p {
    stroke: blue;
    fill: none;
    stroke-width: 10;
    stroke-dasharray: var(--l);
    stroke-dashoffset: var(--l);
    animation: stroke 2s forwards;
  }

  @keyframes stroke {
    to {
      stroke-dashoffset: 0
    }
  }
</style>

<body>
  <svg t="1691137792738" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
    p-id="4415" width="32" height="32">
    <path class="p"
      d="M256,482c-74.443,0-136-61.557-136-136c0-86.588,91.49-156.161,133.411-196.052C254.122,146.84,256,144.579,256,141.938 c0,2.64,1.878,4.901,4.589,5.01C326.51,145.839,418,215.412,418,302C418,424.443,330.443,482,256,482z" />
  </svg>
  <script>
    const paths = document.querySelectorAll('.icon .p')
    paths.forEach((path) => {
      const len = path.getTotalLength()
      console.log(len);
      path.style.setProperty('--l', len)
    })
  </script>
</body>

</html>